<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Track List</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        th, td {
            padding: 5px;
        }
    </style>
</head>

<body>
    <th:block th:include="/menu"></th:block>

    <h2>Track List</h2>
    <div>
        <a th:href="@{/addTrack}">Add Track</a>
        |&nbsp;
        <a th:href="@{'/trackFilter/{filterMethod}' (filterMethod = 'Length')}">Sort by length</a>
        |&nbsp;
        <a th:href="@{'/trackFilter/{filterMethod}' (filterMethod = 'Album')}">Sort by album</a>
    </div>
    <br/><br/>
    <div>
        <table  border="1">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Album</th>
                <th>Length</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
            <tr th:each="track : ${tracks}">
                <td th:utext="${track.id}"></td>
                <td th:utext="${track.name}"></td>
                <td th:utext="${track.album}"></td>
                <td th:utext="${track.length}"></td>
                <td><a th:href="@{'/editTrack/{id}'(id=${track.id})}">edit</a></td>
                <td><a th:href="@{'/deleteTrack/{id}'(id=${track.id})}">delete</a></td>
            </tr>
        </table>
    </div>
</body>
</html>